<html>
<head>
  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="pragma" content="no-cache" />
  <style type="text/css">
    .highlight  {
      -webkit-box-shadow: 0px 0px 35px 5px rgba(85, 255, 13, 1); /* WebKit */
      -moz-box-shadow: 0px 0px 35px 5px rgba(85, 255, 13, 1); /* Firefox */
      box-shadow: 0px 0px 35px 5px rgba(85, 255, 13, 1); /* Standard */
      border-radius: 5px;
    }

    .bluebox {
      background-color: blue;
      color: white;
    }
  </style>
</head>
<body>
<div id="diagram">
</div>

<script src="lib/require/require.js"></script>

<script>
    require({
        baseUrl: "./",
        paths: {
            'jquery' : 'lib/jquery/jquery-1.7.2.min',
            'bpmn/Bpmn' : 'build/bpmn.min',
        },
        packages: [
            { name: "dojo", location: "lib/dojo/dojo" },
            { name: "dojox", location: "lib/dojo/dojox"},
            // provided by build/bpmn.min.js
            { name: "bpmn", location: "src/bpmn" }
        ]
    });

    require(["bpmn/Bpmn", "dojo/domReady!"], function(Bpmn) {
        new Bpmn().renderUrl("test/resources/process002.bpmn", {
            diagramElement : "diagram",
            overlayHtml : '<div style="position: relative; top:100%"></div>'
        }).then(function (bpmn){
            bpmn.zoom(0.8);
            bpmn.annotation("sid-C7031B1A-7F7E-4846-B046-73C638547449").setHtml('<span class="bluebox"  style="position: relative; top:100%">New Text</span>').addClasses(["highlight"]);
            bpmn.annotation("sid-C7031B1A-7F7E-4846-B046-73C638547449").addDiv("<span>Test Div</span>", ["testDivClass"]);
        });
        setTimeout(function(){
            var curNode = $("div[data-activity-id='Task_1k4pgnf']");
            $("div[data-activity-id='Task_1k4pgnf']").css({
                border: '2px solid red',
                'border-radius':'5px',
                left:curNode.position().left - 2,
                top:curNode.position().top - 2
            });
            curNode = $("div[data-activity-id='Task_1m76ylv']");
            $("div[data-activity-id='Task_1m76ylv']").css({
                border: '2px solid green',
                'border-radius':'5px',
                left:curNode.position().left - 2,
                top:curNode.position().top - 2
            });
        },100)
    });

</script>
</body>
</html>
